<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-11 11:29:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-11 12:00:15
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul{
            margin: 166px;
        }

        li{
            list-style: none;
            width: 500px;
            height: 40px;
            border: 1px solid #333;
            position: relative;
            background-color: pink;
        }

        li > p{
            width: 400px;
            height: 320px;
            position: absolute;
            background-color: skyblue;
            left: 600px;
            top:100px;
            pointer-events: none;
            z-index: 999;
            display: none;

        }


    </style>
</head>
<body>
    <ul>
        <li>国产
            <p>国产爱情</p>
        </li>

        <li>欧美
            <p>欧美爱情</p>
        </li>
        <li>日韩
            <p>日韩爱情</p>
        </li>
    </ul>
    <script>

        // 什么时候发生效果 
        // 鼠标移入
        // 鼠标移出 
        // 鼠标移动 获取距离 

        // 在什么范围内  
        // li 移入 显示p
        // li 移出 隐藏p 
        // li 每个li 内部移动的时候  


        // 达到什么效果 
        // 移入 display block
        // 移出 display none 
        // 移动获取坐标点  

        var lis = document.querySelectorAll('li');
        lis.forEach(function(item){
            item.addEventListener('mouseover',overHandler);
            item.addEventListener('mouseout',outHandler);

            item.addEventListener('mousemove',moveHandler);
            //光标 从li 到p 有一个小的抖动 
            // 原因就是 光标和p标签之间的距离过于小 给光标和p标签一个距离就可以了

        });

        function overHandler(){
            this.firstElementChild.style.display = 'block';
        }

        function outHandler(){
            this.firstElementChild.style.display = 'none';
        }

        function moveHandler(e){
            // 获取移动距离首先要有事件对象 
            var x = e.offsetX;
            var y = e.offsetY;
            this.firstElementChild.style.left = x+'px';
            this.firstElementChild.style.top = y+'px';

        }
    </script>
</body>
</html>